<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Extents - Washing Tank example</title>
    <link href="css/samples.css" rel="stylesheet" type="text/css">
    <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.extents.js"></script>
</head><body><div id="page-content">
    <h1>Extents - Washing Tank example</h1>

    <p>The process of tank washing is as simple, as it looks:</p>
    <ol>
        <li>Fill tank with water</li>
        <li>Rock it hard</li>
        <li>Flush dirty water</li>
    </ol>
    <p>Here goes the process:</p>

    <div id="placeholder" style="width:600px;height:300px;position:relative;"></div>

    <div class="cr_footer">Released under GPLv2, (C) 2012 Serge V. Izmaylov</div>
</div>
<script type="text/javascript">
$(function () {
    var d1 = {label: "Water level sensor", data: [[0.000000,0.000000],[0.100000,0.000000],[0.200000,0.000000],[0.300000,0.000000],[0.400000,0.000000],[0.500000,0.000000],[0.600000,0.000000],[0.700000,0.000000],[0.800000,0.000000],[0.900000,0.000000],[1.000000,0.335037],[1.100000,0.571203],[1.200000,1.013529],[1.300000,1.059357],[1.400000,1.410924],[1.500000,2.149897],[1.600000,2.352768],[1.700000,2.665548],[1.800000,3.004115],[1.900000,3.117783],[2.000000,3.591924],[2.100000,3.697779],[2.200000,4.457596],[2.300000,4.542730],[2.400000,4.986582],[2.500000,5.261505],[2.600000,5.587987],[2.700000,5.825770],[2.800000,6.031113],[2.900000,6.531164],[3.000000,7.149623],[3.100000,7.121155],[3.200000,7.761159],[3.300000,8.154948],[3.400000,8.182541],[3.500000,8.604848],[3.600000,9.010325],[3.700000,9.297363],[3.800000,9.447393],[3.900000,9.982493],[4.000000,10.224503],[4.100000,10.000870],[4.200000,10.116814],[4.300000,10.188583],[4.400000,10.075172],[4.500000,10.152542],[4.600000,10.205482],[4.700000,10.077126],[4.800000,10.088966],[4.900000,10.143723],[5.000000,11.124817],[5.100000,12.890320],[5.200000,12.280945],[5.300000,8.857056],[5.400000,11.455872],[5.500000,9.964294],[5.600000,12.666565],[5.700000,9.451965],[5.800000,8.693726],[5.900000,8.350403],[6.000000,7.704956],[6.100000,10.259460],[6.200000,10.968262],[6.300000,10.041382],[6.400000,11.271484],[6.500000,9.089966],[6.600000,11.538818],[6.700000,12.188293],[6.800000,8.127563],[6.900000,12.017822],[7.000000,12.106262],[7.100000,12.913025],[7.200000,9.230774],[7.300000,9.200928],[7.400000,12.106628],[7.500000,11.180298],[7.600000,10.869202],[7.700000,11.226624],[7.800000,8.421265],[7.900000,11.415771],[8.000000,10.519348],[8.100000,9.391174],[8.200000,10.314331],[8.300000,10.185791],[8.400000,9.878296],[8.500000,10.191467],[8.600000,10.145020],[8.700000,9.409241],[8.800000,9.830750],[8.900000,10.156738],[9.000000,10.426758],[9.100000,9.418005],[9.200000,8.131937],[9.300000,7.453424],[9.400000,6.770224],[9.500000,5.912888],[9.600000,5.045020],[9.700000,4.300089],[9.800000,3.635202],[9.900000,3.415015],[10.000000,2.911835],[10.100000,2.487265],[10.200000,1.689081],[10.300000,1.472131],[10.400000,1.189017],[10.500000,1.095551],[10.600000,0.588782],[10.700000,0.667566],[10.800000,0.214716],[10.900000,0.095999],[11.000000,0.214310],[11.000000,0.000000],[11.100000,0.000000],[11.200000,0.000000],[11.300000,0.000000],[11.400000,0.000000],[11.500000,0.000000],[11.600000,0.000000],[11.700000,0.000000],[11.800000,0.000000],[11.900000,0.000000],[12.000000,0.000000]]};
    var d2 = {extents: { show: true }, data: [], extentdata: [
        {label: 'Pump water', start: 1.0, end: 4.0},
        {label: 'Rock the Tank!', start: 5.0, end: 8.0, depends: [0]},
        {label: 'Flush dirty water', start: 9.0, end: 11.0, depends: [1]},
    ]};

    $.plot($("#placeholder"), [ d1, d2 ]);
});
</script></body></html>
